<template>
  <div class="table-wrap" v-loading="isShow">
    <div class="attachment-form">
      <el-form
        :model="parameter"
        ref="formRules"
        label-width="100px"
        class="demo-ruleForm"
        label-position="top"
      >
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <div class="attachment-form-title">项目信息</div>
        </div>
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="项目名称">
              <el-input
                v-model="parameter.projectName"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目地址">
              <el-input
                placeholder="请输入"
                v-model="parameter.projectAddress"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态">
              <el-select
                placeholder="选择状态"
                v-model="parameter.status"
                clearable
                style="width: 100%"
                :disabled="
                  !isDefaultTab || type == 'detail'
                "
              >
                <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <div class="attachment-form-title">附件材料</div>
        </div>
        <table class="table">
          <thead>
            <tr>
              <th>序号</th>
              <th>材料名称</th>
              <th style="width: 40%">上传文件</th>
              <th
                style="width: 20%"
                v-if="isDefaultTab && type !== 'detail'"
              >
                操作
              </th>
            </tr>
          </thead>
          <tbody
            v-for="(item, index) in parameter.fjClPoList"
            :key="index"
          >
            <tr>
              <td>{{ item.rank }}</td>
              <td>{{ item.name }}</td>
              <td style="">
                <el-upload
                  class="upload"
                  :http-request="beforeUpload"
                  :on-preview="onPreview"
                  :file-list="item.landDataClFilePoList"
                  :before-upload="beforeUploadSize"
                  action="#"
                  style="position: relative"
                  :on-remove="onRemove"
                  :disabled="
                    !isDefaultTab || type !== 'edit'
                  "
                  accept=".doc,.docx,.pdf,.png,.jpg,.jpeg,.dwg,.mp4,.gif"
                  multiple
                >
                  <el-button
                    type="text"
                    @click="shangchuan(item)"
                    class="fileUpload"
                    v-if="isDefaultTab && type !== 'detail'"
                  >
                    <span class="upload-icon"></span>
                    <span
                      class="upload-text"
                      :class="
                        isDefaultTab
                          ? ''
                          : 'upload-text-disabled disabled'
                      "
                      >点击上传</span
                    >
                  </el-button>
                </el-upload>
              </td>
              <td v-if="isDefaultTab && type !== 'detail'">
                <div class="table-btn">
                  <!-- <div class="table-btn-item">上传</div> -->
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </el-form>
    </div>
  </div>
</template>

<script>
// import { queryOptions } from '@/api/dict'
import { getDetail } from '@/api/tudi'
import { queryOptions } from '@/api/dict'
import { getZhengQianDetail } from '@/api/zhengqian'
import { downloadOneFile } from '@/api/projectRecord'
import { noticeFileUpload } from '@/api/wisdomBuild'
export default {
  props: {
    currentTab: {
      type: [String, Number],
      default: '0'
    },
    pkid: String,
    type: { type: String, default: 'edit' },
    defaultIndex: {
      type: [Number, String],
      default: '0'
    }
  },
  computed: {
    isDefaultTab() {
      if (this.defaultIndex == this.currentTab) {
        return true
      } else {
        return false
      }
    }
  },
  data() {
    return {
      isShow: false,
      parameter: {
        area: ''
      },
      statusOptions: [],
      selectPkId: ''
    }
  },
  async created() {
    await this.getStatusOptions()
    console.log(this.pkid)
    if (this.pkid !== '') {
      await this.getDetailData()
    }
  },
  mounted() {
    console.log(this.pkid)
  },
  methods: {
    getStatusOptions() {
      queryOptions('tdbz_status').then((res) => {
        if (res.success) {
          this.statusOptions = res.data.map((item) => {
            return {
              label: item.dictText,
              value: item.dictValue
            }
          })
        }
      })
    },
    getDetailData() {
      console.log(this.pkid)
      this.isShow = true
      getZhengQianDetail(this.pkid).then((res) => {
        console.log(res)
        this.parameter = JSON.parse(
          JSON.stringify(res.data)
        )
        //添加附件名
        this.addName(this.parameter)
        this.isShow = false
      })
    },
    addName(obj) {
      for (let i = 0; i < obj.fjClPoList.length; i++) {
        for (const key2 in obj.fjClPoList[i]
          .landDataClFilePoList) {
          obj.fjClPoList[i].landDataClFilePoList[
            key2
          ].name =
            obj.fjClPoList[i].landDataClFilePoList[
              key2
            ].fileName
        }
      }
    },
    shangchuan(item) {
      console.log(item)
      this.selectPkId = item.pkid
    },
    onRemove(file, fileList) {
      let arr = this.parameter.fjClPoList.find(
        (item) => item.pkid == file.clId
      ).landDataClFilePoList
      console.log(arr, this.parameter)
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].fileId == file.fileId) {
          console.log('删这个', arr[i])
          arr.splice(i, 1)
        }
      }
      console.log(arr)
    },
    downloadDaochu(data, fileName) {
      const blob = new Blob([data]) // 把得到的结果用流对象转一下
      const a = document.createElement('a') // 创建一个<a></a>标签
      a.href = URL.createObjectURL(blob) // 将流文件写入a标签的href属性值
      a.download = fileName // 设置文件名
      a.style.display = 'none' // 障眼法藏起来a标签
      document.body.appendChild(a) // 将a标签追加到文档对象中
      a.click() // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
      a.remove() // 一次性的，用完就删除a标签
    },
    xiazai(file) {
      downloadOneFile(file).then((res) => {
        this.downloadDaochu(
          res,
          file.fileName ? file.fileName : file.name
        )
      })
    },
    onPreview(file) {
      console.log(file)
      this.xiazai(file)
    },
    beforeUpload(file) {
      file = file.file
      const param = new FormData()
      param.append('file', file)
      noticeFileUpload(param).then(async (res) => {
        await this.parameter.fjClPoList
          .find((item) => item.pkid == this.selectPkId)
          .landDataClFilePoList.push({
            name: file.name,
            fileId: res.data
          })
      })
      console.log(this.parameter)
    },
    beforeUploadSize(file) {
      // if (file.size / (1024 * 1024) > 10) {
      //   // 限制文件大小
      //   alert('当前限制文件大小不能大于10M')
      //   return false
      // }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-upload {
  position: absolute !important;
  right: -25% !important;
  top: 50% !important;
  transform: translate(50%, -50%) !important;
  &-list {
    &__item {
      margin-top: 0px;
      .el-upload-list__item-name {
        :first-child {
          margin-top: 8px;
        }
        :last-child {
          margin-bottom: 8px;
        }
      }
      .el-upload-list__item-status-label {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
      .el-icon-close {
        // position: absolute;
        top: 50% !important;
        transform: translateY(-50%) !important;
      }
    }
  }
}
.upload {
  //   .el-upload-list--text{
  //   position: absolute !important;
  //   right: -25% !important;
  //   top: 50% !important;
  //   transform: translate(50%,-50%) !important;
  // }
  cursor: pointer;
  // height: 0px;

  &-text {
    // position: absolute;
    // top: -35px;
    // left: 260px;
    color: #00baff;
    // display: none;
  }
  &-text-disabled {
    color: rgb(176, 176, 176);
  }
  &-icon {
    // position: absolute;
    position: absolute !important;
    right: -25% !important;
    top: 50% !important;
    transform: translate(50%, -50%) !important;
    width: 16px;
    height: 14px;
    // top: -22px;
    // left: 240px;
    background: url('~@/assets/images/wisdom-construction/upload-file.png');
    background-size: 100% 100%;
  }
  &-deactive-icon {
    position: absolute !important;
    right: -25% !important;
    top: 50% !important;
    transform: translate(50%, -50%) !important;
    width: 16px;
    height: 14px;
  }
  .fileUpload {
    position: absolute !important;
    right: -25% !important;
    top: 50% !important;
    transform: translate(50%, -50%) !important;
  }

  .el-upload-list__item {
    margin-top: 0px !important;
  }
}
.attachment-form {
  padding: 0 27px;
  &-title {
    color: #4c565c;
    display: flex;
    align-items: center;
    margin: 18px 0 14px 0;
    font-size: 16px;
    &::before {
      content: '';
      display: inline-block;
      width: 4px;
      height: 14px;
      background: linear-gradient(180deg, #40ebff, #bcf8ff);
      margin-right: 7px;
    }
  }
  .table {
    border-collapse: collapse;
    width: 100%;
    box-sizing: border-box;
    margin-left: 7px;
    margin-bottom: 80px;
    thead {
      background-color: #f2f6fb;
    }
    td,
    th {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #6b767d;
      line-height: 42px;
      border: 1px solid #f2f6fb;
      text-align: center;
    }
    td {
      font-weight: normal;
    }
    tbody {
      tr {
        td {
          &:nth-child(1) {
            width: 50px;
          }
          &:nth-child(2) {
            width: 300px;
          }
          &:nth-child(3) {
            width: 300px;
          }
          &:nth-child(4) {
            max-width: 1000px;
          }
          &:nth-child(5) {
            width: 300px;
          }
        }
      }
    }
  }
}
.disabled {
  cursor: default;
}
::v-deep {
  .el-input__inner {
    width: 320px;
  }
}
</style>
